<template>
  <div class="zzgc">
    <div class="zzgctitle">
    种植过程
    </div>

    <div class="msgdiv">
        <div class="msg" v-for="(item,index) in shuju" :key="index">
        <el-row>
            <el-col :span="1">
                <div class="icondiv">
                    <div class="container">
                        <div v-html="item.msgicon"></div>
                    </div>
                </div>
                

            </el-col>
            <el-col :span="23">
                <div class="msginfo">
                    <div class="msg-header">
                        <div class="msgname">{{ item.msgname }}</div>
                        <div class="msgtime">{{ item.msgtime }}</div>
                    </div>
                    <div class="msgcontent">{{ item.msgcontent }}</div>
                    <div class="trace-tag">已溯源</div>
                </div>
            </el-col>
        </el-row>
    </div>
    </div>
    
  </div>
</template>

<script setup>
import { listLog } from '@/api/ncpsy/management/log'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import useUserStore from '@/store/modules/user'

const route = useRoute();
const cropEventId = route.query.cropEventId;
const shuju = ref([])
const userStore = useUserStore()

// 根据事件类型获取对应的图标
const getEventIcon = (eventType) => {
  switch (eventType) {
    case '施肥事件':
      return '<svg t="1755613817632" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9185" width="30" height="30"><path d="M513.29 962.25c-49.69 0-97.91-9.74-143.32-28.95-43.85-18.54-83.22-45.09-117.02-78.89s-60.34-73.17-78.89-117.02c-19.21-45.41-28.95-93.63-28.95-143.32 0-67.38 18.94-137.04 56.29-207.05 29.21-54.74 69.74-109.89 120.47-163.89 85.64-91.16 170.24-147.38 173.8-149.73a31.98 31.98 0 0 1 35.25 0c3.56 2.35 88.16 58.58 173.79 149.74 50.73 54.01 91.26 109.15 120.47 163.89 37.35 70.01 56.29 139.67 56.29 207.05 0 49.69-9.74 97.91-28.95 143.32-18.54 43.85-45.09 83.22-78.89 117.02s-73.17 60.34-117.02 78.89c-45.41 19.2-93.63 28.94-143.32 28.94z m0-823.01c-28.52 20.79-87.47 66.54-145.68 128.69-72.3 77.2-158.49 196.45-158.49 326.15 0 167.72 136.45 304.17 304.17 304.17 167.72 0 304.17-136.45 304.17-304.17 0-129.7-86.19-248.95-158.49-326.15-58.2-62.15-117.15-107.89-145.68-128.69z" fill="#2e7d32" p-id="9186"></path><path d="M514.73 827.23c0.01-0.32 0.02-0.63 0.04-0.95 0.52-13.83 10.03-25.64 23.39-29.21 19.51-5.22 49.48-18.12 81.3-49.94 31.92-31.92 44.93-62.1 50.22-81.75 3.62-13.43 15.54-22.93 29.44-23.37l0.95-0.03c21.09-0.67 36.92 19.19 31.45 39.57-0.81 3.03-1.74 6.2-2.79 9.49-11.51 35.93-33.65 70.98-64.01 101.35-30.39 30.39-65.39 52.46-101.23 63.84-3.38 1.07-6.8 2.01-10.2 2.83-20.17 4.84-39.35-11.11-38.56-31.83z" fill="#2e7d32" p-id="9187"></path></svg>';
    case '灌溉事件':
      return '<svg t="1755613817632" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9185" width="30" height="30"><path d="M513.29 962.25c-49.69 0-97.91-9.74-143.32-28.95-43.85-18.54-83.22-45.09-117.02-78.89s-60.34-73.17-78.89-117.02c-19.21-45.41-28.95-93.63-28.95-143.32 0-67.38 18.94-137.04 56.29-207.05 29.21-54.74 69.74-109.89 120.47-163.89 85.64-91.16 170.24-147.38 173.8-149.73a31.98 31.98 0 0 1 35.25 0c3.56 2.35 88.16 58.58 173.79 149.74 50.73 54.01 91.26 109.15 120.47 163.89 37.35 70.01 56.29 139.67 56.29 207.05 0 49.69-9.74 97.91-28.95 143.32-18.54 43.85-45.09 83.22-78.89 117.02s-73.17 60.34-117.02 78.89c-45.41 19.2-93.63 28.94-143.32 28.94z m0-823.01c-28.52 20.79-87.47 66.54-145.68 128.69-72.3 77.2-158.49 196.45-158.49 326.15 0 167.72 136.45 304.17 304.17 304.17 167.72 0 304.17-136.45 304.17-304.17 0-129.7-86.19-248.95-158.49-326.15-58.2-62.15-117.15-107.89-145.68-128.69z" fill="#2e7d32" p-id="9186"></path><path d="M514.73 827.23c0.01-0.32 0.02-0.63 0.04-0.95 0.52-13.83 10.03-25.64 23.39-29.21 19.51-5.22 49.48-18.12 81.3-49.94 31.92-31.92 44.93-62.1 50.22-81.75 3.62-13.43 15.54-22.93 29.44-23.37l0.95-0.03c21.09-0.67 36.92 19.19 31.45 39.57-0.81 3.03-1.74 6.2-2.79 9.49-11.51 35.93-33.65 70.98-64.01 101.35-30.39 30.39-65.39 52.46-101.23 63.84-3.38 1.07-6.8 2.01-10.2 2.83-20.17 4.84-39.35-11.11-38.56-31.83z" fill="#2e7d32" p-id="9187"></path></svg>';
    case '农药喷洒事件':
      return '<svg t="1755617991782" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24812" width="30" height="30"><path d="M913.92 206.336c-14.677333 0-24.917333 10.24-24.917333 24.917333v138.24h-62.634667v-154.794666c19.626667-6.144 32.597333-23.722667 32.597333-45.056 0-30.037333-25.941333-50.176-50.176-50.176h-170.154666c-6.826667 0-13.312 2.048-19.285334 5.12-6.144-3.072-12.970667-5.12-20.48-5.12h-170.154666c-9.045333 0-17.066667 2.56-24.064 6.656-6.826667-4.096-14.506667-6.656-23.04-6.656h-170.154667c-30.037333 0-50.176 25.941333-50.176 50.176 0 23.893333 17.92 39.424 36.181333 45.056v154.624H134.997333v-138.24c0-14.677333-10.24-24.917333-24.917333-24.917334S85.333333 216.576 85.333333 231.253333v565.077334C85.333333 856.064 133.802667 904.533333 193.365333 904.533333h637.098667C889.173333 904.533333 938.666667 856.746667 938.666667 800.085333V231.253333c0-14.677333-10.24-24.917333-24.746667-24.917333zM134.997333 745.130667h754.005334v54.784c0 32.256-26.282667 58.538667-58.368 58.538666H193.365333c-32.256 0-58.368-26.282667-58.368-58.538666v-54.784z m641.877334-187.904c0 25.429333-22.186667 47.616-47.616 47.616h-3.584c-25.429333 0-47.616-22.186667-47.616-47.616V292.352h98.816v264.874667z m0-362.154667v47.616h-98.816v-47.616c0-10.24-4.949333-18.261333-12.970667-22.186667l123.904 0.341334c-7.509333 4.096-12.117333 11.946667-12.117333 21.845333z m-529.749334 97.28h102.4v265.045333c0 25.429333-22.186667 47.616-47.616 47.616h-7.168c-25.429333 0-47.616-22.186667-47.616-47.616V292.352z m213.674667 0h102.4v265.045333c0 25.429333-22.186667 47.616-47.616 47.616h-7.168c-25.429333 0-47.616-22.186667-47.616-47.616V292.352z m102.4-97.28v47.616h-102.4v-47.616c0-10.24-4.949333-18.432-13.141333-22.186667h128.512c-8.021333 3.754667-12.970667 11.946667-12.970667 22.186667z m-213.674667 0v47.616h-102.4v-47.616c0-10.24-4.949333-18.432-13.141333-22.186667h128.512c-7.850667 3.754667-12.970667 11.946667-12.970667 22.186667z m-54.784 455.850667h3.584c54.442667 0 97.28-42.666667 97.28-97.28V214.698667c2.730667-0.853333 5.290667-2.048 7.68-3.242667 2.389333 1.194667 4.949333 2.389333 7.68 3.242667v338.944c0 54.613333 42.666667 97.28 97.28 97.28h7.168c54.442667 0 97.28-42.666667 97.28-97.28V214.698667c2.218667-0.682667 4.266667-1.536 6.314667-2.56 1.877333 0.853333 3.584 1.877333 5.632 2.389333v339.114667c0 54.613333 42.666667 97.28 97.28 97.28h7.168c54.442667 0 97.28-42.666667 97.28-97.28v-134.485334h62.634667v276.309334H134.997333V419.157333h62.634667v134.485334c0 54.613333 42.666667 97.28 97.109333 97.28z" fill="#2e7d32" p-id="24814" data-spm-anchor-id="a313x.search_index.0.i21.d11d3a81hdSDOv" class="selected"></path></svg>';
    case '其他事件':
      return '<svg t="1755617991782" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24812" width="30" height="30"><path d="M913.92 206.336c-14.677333 0-24.917333 10.24-24.917333 24.917333v138.24h-62.634667v-154.794666c19.626667-6.144 32.597333-23.722667 32.597333-45.056 0-30.037333-25.941333-50.176-50.176-50.176h-170.154666c-6.826667 0-13.312 2.048-19.285334 5.12-6.144-3.072-12.970667-5.12-20.48-5.12h-170.154666c-9.045333 0-17.066667 2.56-24.064 6.656-6.826667-4.096-14.506667-6.656-23.04-6.656h-170.154667c-30.037333 0-50.176 25.941333-50.176 50.176 0 23.893333 17.92 39.424 36.181333 45.056v154.624H134.997333v-138.24c0-14.677333-10.24-24.917333-24.917333-24.917334S85.333333 216.576 85.333333 231.253333v565.077334C85.333333 856.064 133.802667 904.533333 193.365333 904.533333h637.098667C889.173333 904.533333 938.666667 856.746667 938.666667 800.085333V231.253333c0-14.677333-10.24-24.917333-24.746667-24.917333zM134.997333 745.130667h754.005334v54.784c0 32.256-26.282667 58.538667-58.368 58.538666H193.365333c-32.256 0-58.368-26.282667-58.368-58.538666v-54.784z m641.877334-187.904c0 25.429333-22.186667 47.616-47.616 47.616h-3.584c-25.429333 0-47.616-22.186667-47.616-47.616V292.352h98.816v264.874667z m0-362.154667v47.616h-98.816v-47.616c0-10.24-4.949333-18.261333-12.970667-22.186667l123.904 0.341334c-7.509333 4.096-12.117333 11.946667-12.117333 21.845333z m-529.749334 97.28h102.4v265.045333c0 25.429333-22.186667 47.616-47.616 47.616h-7.168c-25.429333 0-47.616-22.186667-47.616-47.616V292.352z m213.674667 0h102.4v265.045333c0 25.429333-22.186667 47.616-47.616 47.616h-7.168c-25.429333 0-47.616-22.186667-47.616-47.616V292.352z m102.4-97.28v47.616h-102.4v-47.616c0-10.24-4.949333-18.432-13.141333-22.186667h128.512c-8.021333 3.754667-12.970667 11.946667-12.970667 22.186667z m-213.674667 0v47.616h-102.4v-47.616c0-10.24-4.949333-18.432-13.141333-22.186667h128.512c-7.850667 3.754667-12.970667 11.946667-12.970667 22.186667z m-54.784 455.850667h3.584c54.442667 0 97.28-42.666667 97.28-97.28V214.698667c2.730667-0.853333 5.290667-2.048 7.68-3.242667 2.389333 1.194667 4.949333 2.389333 7.68 3.242667v338.944c0 54.613333 42.666667 97.28 97.28 97.28h7.168c54.442667 0 97.28-42.666667 97.28-97.28V214.698667c2.218667-0.682667 4.266667-1.536 6.314667-2.56 1.877333 0.853333 3.584 1.877333 5.632 2.389333v339.114667c0 54.613333 42.666667 97.28 97.28 97.28h7.168c54.442667 0 97.28-42.666667 97.28-97.28v-134.485334h62.634667v276.309334H134.997333V419.157333h62.634667v134.485334c0 54.613333 42.666667 97.28 97.109333 97.28z" fill="#2e7d32" p-id="24813" data-spm-anchor-id="a313x.search_index.0.i22.d11d3a81hdSDOv" class="selected"></path></svg>';
    default:
      return '<svg t="1755617991782" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24812" width="30" height="30"><path d="M913.92 206.336c-14.677333 0-24.917333 10.24-24.917333 24.917333v138.24h-62.634667v-154.794666c19.626667-6.144 32.597333-23.722667 32.597333-45.056 0-30.037333-25.941333-50.176-50.176-50.176h-170.154666c-6.826667 0-13.312 2.048-19.285334 5.12-6.144-3.072-12.970667-5.12-20.48-5.12h-170.154666c-9.045333 0-17.066667 2.56-24.064 6.656-6.826667-4.096-14.506667-6.656-23.04-6.656h-170.154667c-30.037333 0-50.176 25.941333-50.176 50.176 0 23.893333 17.92 39.424 36.181333 45.056v154.624H134.997333v-138.24c0-14.677333-10.24-24.917333-24.917333-24.917334S85.333333 216.576 85.333333 231.253333v565.077334C85.333333 856.064 133.802667 904.533333 193.365333 904.533333h637.098667C889.173333 904.533333 938.666667 856.746667 938.666667 800.085333V231.253333c0-14.677333-10.24-24.917333-24.746667-24.917333zM134.997333 745.130667h754.005334v54.784c0 32.256-26.282667 58.538667-58.368 58.538666H193.365333c-32.256 0-58.368-26.282667-58.368-58.538666v-54.784z m641.877334-187.904c0 25.429333-22.186667 47.616-47.616 47.616h-3.584c-25.429333 0-47.616-22.186667-47.616-47.616V292.352h98.816v264.874667z m0-362.154667v47.616h-98.816v-47.616c0-10.24-4.949333-18.261333-12.970667-22.186667l123.904 0.341334c-7.509333 4.096-12.117333 11.946667-12.117333 21.845333z m-529.749334 97.28h102.4v265.045333c0 25.429333-22.186667 47.616-47.616 47.616h-7.168c-25.429333 0-47.616-22.186667-47.616-47.616V292.352z m213.674667 0h102.4v265.045333c0 25.429333-22.186667 47.616-47.616 47.616h-7.168c-25.429333 0-47.616-22.186667-47.616-47.616V292.352z m102.4-97.28v47.616h-102.4v-47.616c0-10.24-4.949333-18.432-13.141333-22.186667h128.512c-8.021333 3.754667-12.970667 11.946667-12.970667 22.186667z m-213.674667 0v47.616h-102.4v-47.616c0-10.24-4.949333-18.432-13.141333-22.186667h128.512c-7.850667 3.754667-12.970667 11.946667-12.970667 22.186667z m-54.784 455.850667h3.584c54.442667 0 97.28-42.666667 97.28-97.28V214.698667c2.730667-0.853333 5.290667-2.048 7.68-3.242667 2.389333 1.194667 4.949333 2.389333 7.68 3.242667v338.944c0 54.613333 42.666667 97.28 97.28 97.28h7.168c54.442667 0 97.28-42.666667 97.28-97.28V214.698667c2.218667-0.682667 4.266667-1.536 6.314667-2.56 1.877333 0.853333 3.584 1.877333 5.632 2.389333v339.114667c0 54.613333 42.666667 97.28 97.28 97.28h7.168c54.442667 0 97.28-42.666667 97.28-97.28v-134.485334h62.634667v276.309334H134.997333V419.157333h62.634667v134.485334c0 54.613333 42.666667 97.28 97.109333 97.28z" fill="#2e7d32" p-id="24813" data-spm-anchor-id="a313x.search_index.0.i22.d11d3a81hdSDOv" class="selected"></path></svg>';
  }
}

// 根据事件类型获取显示名称
const getEventName = (eventType) => {
  switch (eventType) {
    case '施肥事件':
      return '施肥记录';
    case '灌溉事件':
      return '灌溉记录';
    case '农药喷洒事件':
      return '农药记录';
    case '其他事件':
      return '其他事件';
    default:
      return eventType;
  }
}

const fetchLogList = async () => {
  try {
    const res = await listLog({ cropEventId: cropEventId ,userId:userStore.id})
    if (res.code === 200) {
      // 处理日志数据，添加图标和显示名称
      const processedLogs = (res.rows || []).map(item => ({
        ...item,
        msgicon: getEventIcon(item.eventType),
        msgname: getEventName(item.eventType),
        msgtime: item.createTime || '未知时间',
        msgcontent: item.eventDescription || '暂无描述'
      }));
      
      // 按创建时间排序（降序，最新的在前）
      processedLogs.sort((a, b) => {
        const timeA = a.createTime ? new Date(a.createTime) : new Date(0);
        const timeB = b.createTime ? new Date(b.createTime) : new Date(0);
        return timeB - timeA;
      });
      
      shuju.value = processedLogs;
      console.log(processedLogs);
    }
  } catch (error) {
    console.error('获取日志列表失败:', error)
  }
}

onMounted(() => {
  fetchLogList()
})


</script>

<style scoped>
.zzgc{
    margin: 20px 0;
    padding: 30px;
    border-radius: 10px;
    background-color: #ffffff;
    min-height: 100px;
    
}
.zzgctitle{
    font-size: 20px;
    font-weight: 500;
    text-align: left;
}
.msg{
    margin: 10px 0;
}
.msgdiv{
    margin: 10px 0;
    min-height: 60px;
    max-height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
}
.icondiv{
    height: 60px;
    width: 60px;
    border-radius: 30px;
    background-color: #eaf2ea;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container{
    width: 30px;
    height: 30px;
    overflow: hidden;
}
.msginfo{
    margin-left: 20px;
    font-size: 20px;
    text-align: left;
    position: relative;
    padding: 15px 20px;
    border-radius: 10px;
    background-color: #f9faf9;
    border-left: 4px solid #2e7d32;
    transition: all 0.3s ease;
}

.msginfo:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.msg-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    gap: 15px;
}

.msgcontent,.msgname,.msgtime{
    line-height: 1.5;
}

.msgname {
    font-weight: 600;
    color: #2e7d32;
    font-size: 18px;
}

.msgtime {
    color: #909399;
    font-size: 14px;
}

.msgcontent {
    color: #606266;
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 1.6;
}

.trace-tag {
    position: absolute;
    top: 15px;
    right: 20px;
    background-color: #2e7d32;
    color: white;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 500;
}
</style>